<template>

<div style="background-color:#FCFCFC;font-family:'宋体';height:100%;" class="one">
        <div>
            <my-bread level1='个人中心' level2='修改密码' :level3="levelName"></my-bread>
        </div>
        <div style="margin-top:25px;margin-left:80px;">
            <el-row :gutter="10">
                <el-col :span="2">
                    <div style="background-color:#FFEBCD;width:60px;height:60px;display:inline-block;border-radius:50%;overflow:hidden;">
                    </div>
                    <div style="margin-top:5px;margin-left:6px;color:#FFFFFF"><span>{{this.userobj.userRealName}}</span></div>
                    <div style="margin-top:50px;margin-left:1px;"><el-button type="text" style="font-size:15px;color:#FFFFFF;"  @click="infomationClick()">个人信息<span style="color:#B0E0E6;" v-show="infomationShow" class="el-icon-s-promotion"></span></el-button></div>
                    <div style="margin-top:5px;margin-left:1px;"><el-button type="text" style="font-size:15px;color:#FFFFFF;" @click="passwordClick()">修改密码<span style="color:#B0E0E6;" v-show="passwordShow" class="el-icon-s-promotion"></span></el-button></div>
                </el-col>

                <el-col :span="21">
                    <el-row :gutter="10" style="margin-top:20px;">
                        <el-col :span="2"><div style="text-align:right;color:#FFFFFF"><span>账号：</span></div></el-col>
                        <el-col :span="5" style="color:#FFFFFF">{{this.userobj.userName}}</el-col>
                    </el-row>
                    <!-- 个人信息 -->
                    <el-row v-show="infomationShow">
                        <el-card style="margin-top:30px;">
                            <el-row>
                                <el-col :span="6">
                                    <el-row :gutter="12" style="margin-top:20px;">
                                        <el-col :span="8"><div style="text-align:right;"><span>姓名：</span></div></el-col>
                                        <el-col :span="16">{{this.userobj.userRealName}}</el-col>
                                    </el-row>
                                    <el-row :gutter="12" style="margin-top:30px;">
                                        <el-col :span="8"><div style="text-align:right;"><span>手机号：</span></div></el-col>
                                        <el-col :span="16">{{this.userobj.userPhone}}</el-col>
                                    </el-row>
                                    <el-row :gutter="12" style="margin-top:30px;">
                                        <el-col :span="8"><div style="text-align:right;"><span>性别：</span></div></el-col>
                                        <el-col :span="16">{{this.userobj.userGender}}</el-col>
                                    </el-row>
                                        <el-row :gutter="12" style="margin-top:30px;">
                                        <el-col :span="8"><div style="text-align:right;"><span>资质图片：</span></div></el-col>
                                        <div>
                     <el-image
                       style="width: 100px; height: 100px"
               :src="this.userCertPhoto"
                                   :fit="fit"></el-image>
                         </div>
                                    </el-row>




                                                  <el-row :gutter="12" style="margin-top:30px;">
                                        <el-col :span="8"><div style="text-align:right;"><span>身份证图片：</span></div></el-col>
                                        <div>
                     <el-image
                       style="width: 100px; height: 100px"
               :src="this.userIdPhoto"
                                   :fit="fit"></el-image>
                         </div>
                                    </el-row>
                                </el-col>
                                <el-col :span="18">
                                    <el-row>
                                        <el-col>
                                            <el-timeline>
                                                <img src="../img/4.gif" alt="">
                                            </el-timeline>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-row>
                    <!-- 修改密码 -->
                    <el-row v-show="passwordShow">
                        <el-card style="margin-top:30px;">
                            <el-form :model="personalForm">
                                <el-row :gutter="12" style="margin-top:1px;">
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>密码：</span></div>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item prop="password1">
                                            <el-input type="password" show-password v-model="personalForm.password1" placeholder="请输入新的密码" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:1px;">
                                    <el-col :span="6">
                                        <div style="text-align:right;"><span>确认密码：</span></div>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item prop="password2">
                                            <el-input type="password" show-password v-model="personalForm.password2" placeholder="请再次输入新的密码" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="12" style="margin-top:10px;">
                                    <el-col :span="17" style="text-align:center;">
                                        <el-button type="primary" plain round size="medium" @click="submit()">修改</el-button>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        
        <div>

        </div>
    </div>
    
</template>
<script>



export default {
    data(){
        return {
            fit:'',
            userCertPhoto:'',
            userIdPhoto:'',
            userobj:'',
            levelName:'',
            isCollapse:false,
            infomationShow:false,
            passwordShow:false,
            buttonName:"发送短信",
            isDisabled:false,
            time:60,
            userId:"",
            personalForm:{
                account:"",
                phone_num:"",
                verification:"",
                password1:"",
                password2:"",
            }
        }
    },
     mounted() {
    //is user
    let jsonUser= sessionStorage.getItem("user")
    console.log(jsonUser)
    if(jsonUser==''||null==jsonUser){
      this.$message.warning("请先登录")
      this.$router.push("/")
    }else {
      //json String to  json object
      this.userobj= JSON.parse(jsonUser)
      this.userId= this.userobj.userId
            console.log(this.userId)
       this.$axios.get("/api/User/getUserData/" + this.userId).then(
  r=>{
    console.log(r.data)
    this.userCertPhoto = r.data.userCertPhoto
    this.userIdPhoto = r.data.userIdPhoto
  }
)
    }
    if(this.userobj.userGender ==0){
        this.userobj.userGender = "男"
    }
  },
    methods:{
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
            console.log(key)
            console.log(keyPath)
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },

        infomationClick(){    //个人信息事件
            this.infomationShow = true
            this.passwordShow = false
        },
        
        passwordClick(){     //密码事件
            this.infomationShow = false
            this.passwordShow = true
        },
        submit(){  //提交
        if(this.personalForm.password1!=this.personalForm.password2){
            this.$message.warning("两次输入的密码不一致,请重新输入")
        }else{
            let fd = new FormData
            fd.append("userPassword",this.personalForm.password1)
            fd.append("userId",this.userobj.userId)
            this.$axios.post("api/User/updatePassword",fd).then(
                res=>{
                    console.log(res.data)
                    this.$router.push("/")
                }
            )
        }
        }
    }
}
</script>

<style>
    .name{ text-align: right; }
    .value{ text-align: left; }
  html,body,#app{
      height: 100%;
      background-color: white;
    }
.one{
  background-image: url("../img/1.jpg");
}


</style>